import React from 'react'
import Link from 'next/link'
import {format} from '../utils'

export default class PostItem extends React.Component {
  render () {
    const post = this.props.post
    return (
      <div className="post-item">
        <div className="post-auhtor">
          <a href={'https://cnodejs.org/user/' + post.author.loginname} title={post.author.loginname} target="_blank">
          <img src={post.author.avatar_url} alt="user" className="avator" />
          </a>
          <a href={'https://cnodejs.org/user/' + post.author.loginname} title={post.author.loginname} className="post-user-name" target="_blank">{post.author.loginname}</a>
          <span className="post-time">{format(post.create_at, 'yyyy-MM-dd HH:mm:ss')}</span>
        </div>
        <div className="post-title">
          <Link href={{pathname: `/post`, query: {postId: post.id}}} prefetch><a className="post-url"><h2 className="post-title">{post.title}</h2></a></Link>
          {/* <Link href={{pathname: `/demo`, query: {test: 2}}} prefetch><a className="post-url"><h2 className="post-title">{post.title}</h2></a></Link> */}
        </div>
        <div className="post-control">
          <span className="post-stat-view" title={post.visit_count + ' 阅读'}>
            <i className="fa fa-eye"></i>
            {post.visit_count}
          </span>
          <span className="post-stat-comment" title={post.reply_count + ' 评论'}>
            <i className="fa fa-comment-o"></i>
            {post.reply_count}
          </span>
        </div>
      </div>
    )
  }
}
